import { useState, useContext, useEffect } from "react";
import "./child.css";
import DataContext from "../contex";

function Child() {
  // 1.基本类型的响应式数据
  const [count, setCount] = useState(0);
  const addCount = () => {
    setCount(count + 1);
  };

  // 2.对象类型的响应式数据
  const [person, setPerson] = useState({
    name: "张三",
  });
  const changePer = () => {
    setPerson({
      name: "李四",
    });
  };

  const dataFromFather = useContext(DataContext);

  //不传参相当于生命周期的------更新
  useEffect(() => {
    console.log("子组件1更新了");
  });

  //传空数组相当于组件---------挂载
  useEffect(() => {
    console.log("子组件1挂载了");
  }, []);

  //传入特定的依赖项，相当于-----watch
  useEffect(() => {
    console.log("count被修改了");
  }, [count]);

  //传入return，相当于-----组件卸载要做的操作放这里面
  useEffect(() => {
    console.log("count被修改了");
    return () => {
        console.log('可以在此进行卸载相关操作')
    }
  });

  return (
    <div>
      <h4 style={{ color: "blue", fontSize: "14px" }}>
        子组件1:响应式数据和css样式，provide注入，生命周期的模拟
      </h4>
      <button onClick={addCount}>点我加1</button>
      <span className="title">{count}</span>
      <br />
      <button onClick={changePer}>修改名字</button>
      <span className="title">{person.name}</span>
      <div style={{ color: "red" }}>{dataFromFather}</div>
    </div>
  );
}

export default Child;
